<template>
<div class="container">
  <div class="box">
    <header class="header">
      <div class="seach">
        <input type="text">
        <span><i class="iconfont icon-ai-search"></i></span>
      </div>
    </header>
    <!-- 内容块 -->
    <div class="content">
      <!-- 1.轮播图区域 -->
      <div class="banner">
        <div class="ban_left"></div>
        <div class="ban_center" @click="banner">
          <mt-swipe :auto="3000">
            <mt-swipe-item><img src="./../../assets/baby1.jpg" alt=""></mt-swipe-item>
            <mt-swipe-item><img src="http://cp2.douguo.net/upload/caiku/a/5/3/yuan_a5399c98b6da93ea8b2d1d28cbcc34e3.jpeg" alt=""></mt-swipe-item>
            <mt-swipe-item><img src="./../../assets/food1.jpg" alt=""></mt-swipe-item>
          </mt-swipe>
        </div>
        <div class="ban_right"></div>
      </div>
      <!-- 2.二级导航区域 -->
      <div class="nav">
        <ul class="uls">
          <router-link tag="li" to="/Recipes">食谱</router-link>
          <router-link tag="li" to="/Hundred">百科</router-link>
          <router-link tag="li" to="/Answer">问答</router-link>
        </ul>
      </div>
      <!-- 3.新闻列表 -->
      <div class="news">
        <ul>
          <li>
            <div class="li_cont">
              <img src="./../../assets/baby5.jpg" alt="">
              <p>生长发育，8个月第1周宝宝的成长特点</p>
              <span>9999万人在读</span>
            </div>
          </li>
          <li>
            <div class="li_cont">
              <img src="https://g-search2.alicdn.com/img/bao/uploaded/i4/i1/2200415026/O1CN01M4Hm411mzx6Pee97b_!!0-item_pic.jpg_360x360Q90.jpg_.webp" alt="">
              <p>谷雨学习桌多功能早教双语游戏桌 益智玩具台 宝宝游戏桌 1-3岁</p>
              <span>199万人在读</span>
            </div>
          </li>
          <li>
            <div class="li_cont">
              <img src="https://img.alicdn.com/bao/uploaded/TB1BtCHLFXXXXXSapXXSutbFXXX.jpg_q90.jpg" alt="">
              <p>Cantaloop欧洲原装进口孕妇托腹带孕期护腰安胎带安胎透气孕妇用</p>
              <span>29万人在读</span>
            </div>
          </li>
          <li v-for="(item, index) in silklist" :key="index">
            <div class="li_cont">
              <img :src="item.imgurl" alt="">
              <p>{{item.info}}</p>
              <span>{{item.number}}人在读</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import axios from 'axios'
import Vue from 'vue'
import { Swipe, SwipeItem } from 'mint-ui'
Vue.component(Swipe.name, Swipe)
Vue.component(SwipeItem.name, SwipeItem)
export default {
  data () {
    return {
      silklist: []
    }
  },
  created () {
    // this.$axios.post('/daxun/ace/selectAceAll.do')
    // const qs = require('qs')
    axios.post('http://10.8.162.9:8081/ace/selectAceAll.do', {
      token: 'McjUBDjSAPiRmii/0a03pV+hf1QUDwYu0FD8RQH7Ao3rjFJwqmLYlkXfIhgZTawXiyZReSxV4j9oeFe60XQUjC6wiY+jPV2cz1R6O0lt+cQ0qqyDNpre3gA1dinsiLPt06OX2vC/h4XuRtQ3cQbg5vZDvkhG7redM0KiX4e9PJdSJyuVyla7ItV9jOHGvHRGHzr7pcJEgd8wmmO4uCamJw=='
    })
      .then((response) => {
        console.log(response.data)
        var data = response.data.list
        this.silklist = data
        console.log(this.silklist)
      })
      .catch(function (error) {
        console.log(error)
      })
  },
  methods: {
    banner () {
      this.$router.push('/detail')
    }
  }
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';
  .seach {
    @include rect(100%, 100%);
    @include flexbox();
    @include align-items();
    input {
      width: 2.52rem;
      height: 0.25rem;
      line-height: 0.20rem;
      border-radius: 0.10rem;
      background-color: rgba(242, 242, 242, 1);
      color: rgba(16, 16, 16, 1);
      font-size: 0.14rem;
      text-align: center;
      font-family: Arial;
      border: 1px solid rgba(255, 255, 255, 0);
      margin-left: 0.6rem;
    }
    .icon-ai-search {
      margin-left: 0.06rem;
      font-size: 0.16rem;
      color: rgb(133, 118, 121)
    }
  }
  .content {
    // banner
    .banner {
      @include rect(100%, 1.48rem);
      @include flexbox();
      @include justify-content(space-between);
      @include align-items();
      margin-top: 0.1rem;
      .ban_left {
        width: 0.3rem;
        height: 1.24rem;
        line-height: 0.20rem;
        border-radius: 0 0.15rem 0.15rem 0;
        background-color: rgba(255, 197, 130, 0.637);
        text-align: center;
        border: 1px solid rgba(255, 255, 255, 0);
      }
      .ban_center {
        width: 2.75rem;
        height: 1.5rem;
        line-height: 0.20rem;
        border-radius: 0.20rem;
        background-color: rgba(213, 213, 213, 1);
        color: rgba(16, 16, 16, 1);
        font-size: 0.14rem;
        text-align: center;
        font-family: Arial;
        border: 1px solid rgba(255, 255, 255, 0.829);
        img {
          @include rect(100%, 100%);
          border-radius: 0.20rem;
        }
      }
      .ban_right {
        width: 0.3rem;
        height: 1.24rem;
        line-height: 0.20rem;
        border-radius: 0.15rem 0 0 0.15rem;
        background-color: rgba(255, 197, 130, 0.637);
        text-align: center;
        border: 1px solid rgba(255, 255, 255, 0);
      }
    }
    // 导航
    .nav {
      @include rect(100%, 0.34rem);
      text-align: center;
      .uls {
      @include rect(100%, 0.34rem);
      @include flexbox();
      @include justify-content();
      @include align-items();
      @include margin(0.16rem 0 0 0);
      background: #F2F2F2;
      border-radius: 0.05rem;
      color: rgb(226, 155, 74);
      li {
        @include rect(0.94rem, 0.24rem);
        font-size: 0.14rem;
      }
      }
    }
    // 资讯推送
    .news {
      @include rect(100%, auto);
      ul {
        @include rect(100%, auto);
        @include flexbox();
        @include justify-content();
        @include align-items();
        @include flex-direction(column);
        li {
          margin-bottom: 0.18rem;
          @include rect(100%, 1.4rem);
          @include background-color(#F2F2F2);
          .li_cont {
            @include rect(100%, 0.88rem);
            margin-top: 0.25rem;
            position: relative;
            img {
              @include rect(1.33rem, 0.88rem);
              @include margin(0 0.1rem);
              @include background-color(rgb(238, 132, 132));
              float: left;
            }
            p {
              float: left;
              margin-left: 0.02rem;
              font-size: 0.14rem;
              width: 2.14rem;
              height: auto;
              line-height: 0.22rem;
              background-color: rgba(242, 242, 242, 1);
              color: rgba(70, 69, 69, 1);
              text-align: left;
              font-family: Arial;
              border: 1px solid rgba(255, 255, 255, 0);
            }
            span {
              width: 2.20rem;
              height: 0.21rem;
              line-height: 0.15rem;
              background-color: rgba(242, 242, 242, 1);
              color: rgba(172, 170, 170, 1);
              font-size: 0.10rem;
              text-align: left;
              font-family: Arial;
              border: 1px solid rgba(255, 255, 255, 0);
              position: absolute;
              bottom: 0;
              left: 1.52rem;
            }
          }
        }
      }
    }
  }
</style>
